<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
        v-for="item in tabOptions"
        :label="item.label"
        :key="item.name"
        :name="item.name"></el-tab-pane>
    <!--    <el-tab-pane label="用户管理" name="1"></el-tab-pane>-->
    <!--    <el-tab-pane label="配置管理" name="2"></el-tab-pane>-->
    <!--    <el-tab-pane label="角色管理" name="3"></el-tab-pane>-->
    <!--    <el-tab-pane label="定时任务补偿" name="4"></el-tab-pane>-->
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      // ------------- selectOptions ---------------
      bigDataOptions: [
        {
          label: "时间分布",
          name: "1"
        }, {
          label: "内容分布",
          name: "2"
        }, {
          label: "空间分布",
          name: "3"
        }],
      broadCastOptions: [
        {
          label: "条件查询",
          name: "1"
        }, {
          label: "区域查询",
          name: "2"
        }],
      workOptions: [
        {
          label: "终端管理",
          name: "1"
        }, {
          label: "频点分类管理",
          name: "2"
        },
        {
          label: "人员管理",
          name: "3"
        }, {
          label: "使用记录",
          name: "4"
        }],
      controlOptions: [
        {
          label: "系统设置",
          name: "1"
        }, {
          label: "配置信息",
          name: "2"
        }],
    };
  },
  props: {
    currOptionNum: {
      type: Number,
      default: 2
    }
  },
  watch: {
    currOptionNum: function () {
      this.activeName = "1"
    }
  },
  computed: {
    tabOptions: function () {
      switch (this.currOptionNum) {
        case 1:
          return this.bigDataOptions
        case 2:
          return this.broadCastOptions
        case 3:
          return this.workOptions
        case 4:
          return this.controlOptions
        default:
          return []
      }
    }
  },
  methods: {
    /**
     * 标签页变化
     */
    handleClick() {
      this.$emit("tabChanged", this.activeName);
    }
  }
}
</script>

<style scoped>

</style>